<template>
	<view>
		<!-- <view class="status_bar">
			</view>
		<view class="u-search-title">
			<u-row customStyle="padding: 20rpx ">
				<u-col span="1" >
					<u-icon size="20" name="arrow-left" color="#FFFFFF" @click="goBack"></u-icon>
				</u-col>
				<u-col span="10">
					<u-search placeholder="搜索信息" :show-action="false" v-model="queryParam.siteName" @change="search"
						@focus="showQuery=true"></u-search>
				</u-col>
				<u-col span="1" v-if="!showQuery">
					<u-icon size="30" name="list" color="#FFFFFF" @click="showLayer=!showLayer"></u-icon>
				</u-col>
			</u-row>
		</view> -->

		<view class="topyl">
			<u-search placeholder="搜索信息" :show-action="false" v-model="queryParam.siteName" @change="search"
				bgColor="#FFFFFF" borderColor=" rgba(255, 80, 0, 0.85)" style="" @focus="showQuery=true"></u-search>
			<view @click="showLayer=!showLayer"
				style="background-color: rgba(255, 80, 0, 0.85); border-radius: 4px;padding: 4px;margin-left: 10px;">
				<u-icon size="22" name="list" color="#FFFFFF"></u-icon>
			</view>
		</view>

		<view v-show="showQuery">
			<div style="height: 44px;"></div>
			<scroll-view :style="getHeight()" scroll-y="true">
				<u-list>
					<u-list-item v-for="(item, index) in queryList" :key="index">
						<u-cell customStyle="padding-Left: 20rpx " :title="item.siteName" @click="handClickSite(item)">
						</u-cell>
					</u-list-item>
				</u-list>
			</scroll-view>
		</view>

		<view v-show="!showQuery" class="map">
			<comp-map ref="mainMap" text="1" @mapMounted="onMapMpunted" @pointClick="onPointClick"></comp-map>
		</view>
		<u-popup :show="showLayer" mode="right" closeOnClickOverlay customStyle="margin-top:54px"
			@close="showLayer=!showLayer">
			<u-list customStyle="width:80vw">
				<u-list-item v-for="(item, index) in deviceTyepList" :key="index">
					<u-cell :title="item.siteSubTypeName" @click="handClickLayer(item)">
						<u-icon slot="right-icon" name="checkmark" color="#FF5000" size="20"
							v-if="item.siteSubTypeCode===queryParam.siteSubTypeCode"></u-icon>
					</u-cell>
				</u-list-item>
			</u-list>
		</u-popup>
	</view>

</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../../common/wst_hydra-1.0.0.js');


	import coordtransform from 'coordtransform';
	import {
		getTypeCount,
		getSites,
		getDictionaryData
	} from '@/common/api.js';
	import compMap from "@/components/comp-map/comp-map.vue"

	export default {
		components: {
			compMap
		},
		data() {
			return {
				queryParam: {
					siteName: '',
					siteSubTypeCode: '',
				},
				showQuery: false, //
				showLayer: false, //
				queryList: [], //查询的list
				currenLayer: '全部',
				deviceTyepList: [], //查询的list
				mapDataList: [], //数据list
				titleName: "雨量分布",
			}

		},
		methods: {
			async getTypeCountList() {
				try {
					const params = {}; //
					const config = {}; // 
					this.deviceTyepList = await getTypeCount(params, config);
				} catch (error) {
					// 处理请求失败的逻辑
					/* console.error(error); */
				}
			},
			async search() {
				this.titleName = '雨量分布'
				try {
					const result = await getSites({
						...this.queryParam
					});
					const data = [];
					for (let key in result) {
						result[key].map(item => {
							data.push(item);
						})
					};
					this.queryList = data;
				} catch (error) {
					// 处理请求失败的逻辑
					/* console.error(error); */
				}
			},
			async onMapMpunted() {
				try {
					const result = await getSites({
						...this.queryParam
					});
					const points = [];
					for (let key in result) {
						result[key].map(item => {
							item.icon = key
							points.push(item);
						})
					};
					/* console.log(points) */
					this.$refs.mainMap.addPointTolayer("运行", points);
				} catch (error) {
					// 处理请求失败的逻辑
					/* console.error(error); */
				}
			},
			/* goBack() {
				if(this.showQuery){
					this.showQuery =false;
				}else{
					uni.navigateBack();
				}
			}, */
			handClickLayer(item) {
				this.changeName(item.siteSubTypeName)
				this.queryParam.siteSubTypeCode = item.siteSubTypeCode;
				this.showLayer = false;
				this.onMapMpunted();
				this.search();

			},
			changeName(name) {
				uni.setNavigationBarTitle({
					title: name
				});
			},
			handClickSite(point) {
				const points = [
					[point.lat, point.lng]
				];
				this.titleName = point.siteName
				this.$refs.mainMap.moveByPoints(points);
				this.showQuery = false;
				this.queryParam.siteName = '';
			},
			onPointClick(event) {
				uni.$u.route({
					url: `/pages/yxsk/yxjc/index?siteId=${event.siteId}&siteName=${event.siteName}&status=${event.status}`
				});
			},
			hideQuery() {
				setTimeout(this.showQuery = false, 30000)
			},
			getHeight() {
				let a = uni.getSystemInfoSync().windowHeight - 64
				return {
					'height': a + 'px',
					'margin-top': '10px',
					'margin-bottom': '10px'
				}
			}
		},
		watch: {
			titleName: function(newVal, oldVal) {
				uni.setNavigationBarTitle({
					title: newVal
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onLoad(option) {
			this.queryParam.siteSubTypeCode = option.siteSubTypeCode;
			uni.setNavigationBarTitle({
				title: option.title
			});
			document.body.style.overflow = 'auto';
			this.getTypeCountList();
			this.search()
		},
		onShow() {
			document.body.style.overflow = 'auto';
		}
	};
</script>
<style lang="scss" scoped>
	.status_bar {
		background-color: #FF5000;
		height: var(--status-bar-height);
		width: 100%;
	}

	.u-search-title {
		background-color: #FF5000;
	}

	.map {
		position: relative;
		top: 30;
		z-index: 500;
		height: 100vh;
	}

	.topyl {
		background: transparent;
		/* 将背景改成透明 */
		position: fixed;
		/* 浮动在页面顶部 */
		top: 10px;
		/* margin-top 10px */
		left: 15px;
		right: 15px;
		display: flex;
		/* 两个元素放在一行的位置水平对齐 */
		align-items: center;
		/* 两个元素放在一行的位置水平对齐 */
		z-index: 2000;
	}
</style>